<template>
	<div class="inOutgailv" ref='inOutgailv'>
		<h2 class="titleSelf">{{thatYear}}年跨境进出口概览</h2>
		<div class="contentSelf">
			<div class="huozhiShow">
				<!-- <div class="huozhiShowTit">
					<span>总货值</span>
					<span>（万元）</span>
				</div> -->
				<div class="huozhiShowCon">
					<div class="houzhiImg" >
						<div class="tongbishangzhang" >
							<span><i style="font-weight: bold;margin-right: .05rem;">↑</i>{{commonFunction.formatNumberRgx(tongbiszzhanbi)}}</span>
							<span>同比上涨</span>
						</div>
						<div class="totalHouzhi20TxtWrap">
							<div>
								<span>总货值</span>
								<span>(万元)</span>
							</div>
							
							<span>{{commonFunction.formatNumberRgx(totalHouzhi20Txt)}}</span>
						</div>
						
					</div>
					<div ref="inOutgailvChart" class="inOutgailvChart" style="display: none;"></div>

				</div>
			</div>
			<div class="zongliangShow">
				<div class="zongdanliang">
					<span class="zdlTit">总单量</span>
					<span class="zdlLine"></span>
					<div class="zdlTxt">
						<span>{{commonFunction.formatNumberRgx(totalDangliang)}}</span>
						<span>万包</span>
					</div>
				</div>
			</div>
			<div class="listShow">
				<div class="list">
					<div class="listTxt">
						<span>出口单量</span>
						<div class="zdlTxt">
							<span>{{commonFunction.formatNumberRgx(outDangliang)}}</span>
							<span>万包</span>
						</div>
					</div>
					<span class="listTxtLine"></span>
					<div class="listTxt">
						<span>出口货值</span>
						<div class="zdlTxt">
							<span>{{commonFunction.formatNumberRgx(outHouzhi)}}</span>
							<span>万元</span>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="listTxt listTxt1">
						<span>进口单量</span>
						<div class="zdlTxt">
							<span>{{commonFunction.formatNumberRgx(inDangliang)}}</span>
							<span>万包</span>
						</div>
					</div>
					<span class="listTxtLine"></span>
					<div class="listTxt listTxt1">
						<span>进口货值</span>
						<div class="zdlTxt">
							<span>{{commonFunction.formatNumberRgx(inHouzhi)}}</span>
							<span>万元</span>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="listTxt listTxt2">
						<span>利税</span>
					</div>
					<span class="listTxtLine"></span>
					<div class="listTxt listTxt2">
						<div class="zdlTxt">
							<span>{{commonFunction.formatNumberRgx(lishui)}}</span>
							<span>万元</span>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>

</template>

<script>
	export default {
		name: 'inOutgailv',
		components: {

		},
		data() {
			return {
				thatYear:new Date().getFullYear()-1,
				tongbiszzhanbi:0,
				totalHouzhi20Txt:0,
				totalDangliang:0,
				inHouzhi:0,
				inDangliang:0,
				lishui:0,
				outHouzhi:0,
				outDangliang:0,
			}
		},
		mounted() {
			
			var that = this;
			that.getDataFn()
			that.getInEchartData()
			that.getOutEchartData()
			that.getImgData()
			that.getEchartData()
			setInterval(function() {
				that.getDataFn()
				that.getInEchartData()
				that.getOutEchartData()
				that.getImgData()
				that.getEchartData()
			}, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();
			
			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getInEchartData(){
				var that = this;
				var startDate = that.commonFunction.getLastYearYestdy('Y')[0];
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'Y',
							start: startDate,
							end: startDate+1,
							ie: 'I'
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							var getDatas = data0.data.result.hn_business_trends
							that.inHouzhi = (getDatas[0].GOODVALUE/10000).toFixed(0);
							that.inDangliang = (getDatas[0].AMOUNT/10000).toFixed(0);
							that.lishui = (getDatas[0].TAX/10000).toFixed(0)
							
							// console.log(data0.data.result.hn_business_trends)
						} else {
							alert("数据请求错误")
						}
				
					})
					.catch(function(error) {
						alert(error)
					})
			},
			getOutEchartData(){
				var that = this;
				var startDate = that.commonFunction.getLastYearYestdy('Y')[0];
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'Y',
							start: startDate,
							end: startDate+1,
							ie: 'E'
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							// console.log(data0.data.result.hn_business_trends,"nx")
							var getDatas = data0.data.result.hn_business_trends
							that.outHouzhi = (getDatas[0].GOODVALUE/10000).toFixed(0);
							that.outDangliang = (getDatas[0].AMOUNT/10000).toFixed(0);
							
						} else {
							alert("数据请求错误")
						}
				
					})
					.catch(function(error) {
						alert(error)
					})
			},
			getDataFn(){
				var that = this;
				var startDate = that.commonFunction.getLastYearYestdy('Y')[0];
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'Y',
							start: startDate,
							end: startDate+1,
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							var getDatas = data0.data.result.hn_business_trends
							that.totalDangliang = (getDatas[0].AMOUNT/10000).toFixed(0);
							
							
						} else {
							alert("数据请求错误")
						}
				
					})
					.catch(function(error) {
						alert(error)
					})
			},
			getImgData(){
				var that = this;
				var startDate = that.commonFunction.getLastYearYestdy()[0];
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'Y',
							start: startDate,
							end: startDate+1,
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							var getDatas20 = data0.data.result.hn_business_trends
							var totalHouzhi20 = getDatas20[0].GOODVALUE;
							that.totalHouzhi20Txt = (getDatas20[0].GOODVALUE/10000).toFixed(0)
							// console.log(that.totalHouzhi20Txt)
							that.$myHttp.get("getBusinessTrendsInfo", {
									params: {
										dtype: 'Y',
										start: startDate-1,
										end: startDate,
									}
								})
								.then(function(data0) {
									if (data0.status == "200") {
										var getDatas19 = data0.data.result.hn_business_trends
										
										var totalHouzhi19 = getDatas19[0].GOODVALUE;
										// console.log(totalHouzhi20)
										// console.log(totalHouzhi19)
										// 同比上涨
										if((totalHouzhi20-totalHouzhi19)>0){
											that.tongbiszzhanbi = ((totalHouzhi20-totalHouzhi19) /totalHouzhi19).toFixed(2)*100+'%';
										}
										// console.log(that.tongbiszzhanbi)
										
									} else {
										alert("数据请求错误")
									}
							
								})
								.catch(function(error) {
									alert(error)
								})
							
							
							
						} else {
							alert("数据请求错误")
						}
				
					})
					.catch(function(error) {
						alert(error)
					})
			},
			
			getEchartData() {
				const inOutgailvChart = this.$refs.inOutgailvChart;
				if (inOutgailvChart) {
					// console.log(this.$echarts)
					const myChart = this.$echarts.init(inOutgailvChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy('Y')[0];
					that.$myHttp.get("getBusinessTrendsInfo", {
							params: {
								dtype: 'Y',
								start: startDate,
								end: startDate+1,
							}
						})
						.then(function(data0) {
							if (data0.status == "200") {
								var getDatas20 = data0.data.result.hn_business_trends
								var totalHouzhi20 = (getDatas20[0].GOODVALUE/100000000).toFixed(2);
								var xData2 = ["总货值"];
								var data1 = [totalHouzhi20];
								
								that.$myHttp.get("getBusinessTrendsInfo", {
										params: {
											dtype: 'Y',
											start: startDate-1,
											end: startDate,
										}
									})
									.then(function(data0) {
										if (data0.status == "200") {
											var getDatas19 = data0.data.result.hn_business_trends
											
											var totalHouzhi19 = (getDatas19[0].GOODVALUE/100000000).toFixed(2);
											// console.log(totalHouzhi20,totalHouzhi19)
											// console.log()
											var data2 = [(parseFloat(totalHouzhi20)+parseFloat(totalHouzhi19))];
											// console.log(data2)
											const option = {
											
												grid: {
													left: '5%',
													bottom: '13%',
													top: '12%',
												},
												xAxis: {
													show: false,
													data: xData2,
													axisTick: {
														show: false
													},
													axisLine: {
														show: false
													},
													axisLabel: {
														interval: 0,
														textStyle: {
															color: '#fff',
															fontSize: that.commonFunction.fontSize(0.1),
														},
														margin: that.commonFunction.fontSize(0.1), //刻度标签与轴线之间的距离。
													},
											
												},
												yAxis: {
													show: false,
													splitLine: {
														show: false,
													},
													axisTick: {
														show: false
													},
													axisLine: {
														show: false
													},
													boundaryGap: true,
													axisLabel: {
														textStyle: {
															color: '#fff',
															fontSize: that.commonFunction.fontSize(0.1),
														},
													}
												},
												series: [{ //最低下的圆片
														"name": "",
														"type": "pictorialBar",
														"symbolSize": [that.commonFunction.fontSize(0.8), that.commonFunction.fontSize(
															0.2)],
														"symbolOffset": [0, that.commonFunction.fontSize(0.1)],
														"z": that.commonFunction.fontSize(0.1),
														itemStyle: {
															opacity: 1,
															color: function(params) {
																var a = params.name.slice(0, 2);
																return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
																	offset: 0,
																	color: '#09a4cc' // 0% 处的颜色
																}, {
																	offset: 1,
																	color: '#09a4cc' // 100% 处的颜色
																}], false)
											
															}
														},
														"data": [1, 1, 1, 1, 1],
														// z: 0,
													},
											
											
													//下半截柱状图
													{
														name: '2020',
														type: 'bar',
														barWidth: that.commonFunction.fontSize(0.8),
														barGap: '-100%',
														formatter: (params) => {
															console.log(params)
														},
														itemStyle: { //lenged文本
															opacity: .7,
															color: function(params) {
																var a = params.name.slice(0, 2);
																return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
																	offset: 0,
																	color: '#0db2ff' // 0% 处的颜色
																}, {
																	offset: 1,
																	color: '#16e6ff' // 100% 处的颜色
																}], false)
															}
														},
														label: {
															formatter: (params) => {
																console.log(params)
															},
														},
														data: data1,
														z: 2,
													},
											
													{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
														type: 'bar',
														barWidth: that.commonFunction.fontSize(0.8),
														barGap: '-100%',
														stack: '广告',
														itemStyle: {
															color: 'transparent'
														},
														label: {
															show: true,
															color: 'red',
															position: 'inside',
															offset: [-that.commonFunction.fontSize(0), that.commonFunction.fontSize(0.05)],
															fontSize: that.commonFunction.fontSize(0.16),
															formatter: (params) => {
																return params.value
															},
														},
											
														data: data1,
														z: 2,
													},
											
													{
														"name": "", //头部 透明柱体上面的片片
														"type": "pictorialBar",
														"symbolSize": [that.commonFunction.fontSize(0.8), that.commonFunction.fontSize(
															0.2)],
														"symbolOffset": [0, -that.commonFunction.fontSize(0.1)],
														"z": that.commonFunction.fontSize(0.1),
														"symbolPosition": "end",
														itemStyle: {
															color: '#b5fff3',
															opacity: 1,
														},
														"data": data2,
														z: 0,
													},
											
													{
														"name": "", //中间的片片
														"type": "pictorialBar",
														"symbolSize": [that.commonFunction.fontSize(0.8), that.commonFunction.fontSize(
															0.2)],
														"symbolOffset": [0, -that.commonFunction.fontSize(0.1)],
														"z": that.commonFunction.fontSize(0.1),
														itemStyle: {
															opacity: 1,
															color: function(params) {
																var a = params.name.slice(0, 2);
																return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
																	offset: 0,
																	color: '#48ffcb' // 0% 处的颜色
																}, {
																	offset: 1,
																	color: '#07e9ff' // 100% 处的颜色
																}], false)
															}
														},
														"symbolPosition": "end",
														"data": data1,
														z: 0,
													},
											
													{
														name: '', //透明柱状图
														type: 'bar',
														barWidth: that.commonFunction.fontSize(0.8),
														barGap: '-100%',
														z: 1,
														itemStyle: {
															color: '#a8ecff',
															opacity: .7,
														},
														label: {
															show: true,
															position: 'top',
															offset: [that.commonFunction.fontSize(0), that.commonFunction.fontSize(0.4)],
															fontSize: that.commonFunction.fontSize(0.18),
															formatter: (params) => {
											
																if (data1[0] > 0) {
																	var data = ((parseFloat(totalHouzhi20)-parseFloat(totalHouzhi19)) / parseFloat(totalHouzhi19)).toFixed(2);
																	if(parseFloat(totalHouzhi20)>parseFloat(totalHouzhi19)){
																		return '{a|↑}{b|' + data + '}\n{c|同比上涨}';
																	}
																	
																	
																}
											
															},
															rich: {
																a:{
																	color: '#f52366',
																	fontSize: that.commonFunction.fontSize(0.16),
																	fontWeight:'bold',
																	align: 'center',
																},
																b: {
																	color: '#f52366',
																	fontSize: that.commonFunction.fontSize(0.13),
																	align: 'center',
											
																},
											
																c: {
																	color: '#f52366',
																	fontSize: that.commonFunction.fontSize(0.12),
																	align: 'center',
																}
															},
														},
											
														data: data2
													}
											
												]
											};
											
											myChart.setOption(option)
											window.addEventListener("resize", function() {
												myChart.resize()
											})
											
											
										} else {
											alert("数据请求错误")
										}
								
									})
									.catch(function(error) {
										alert(error)
									})
								
								
								
							} else {
								alert("数据请求错误")
							}
					
						})
						.catch(function(error) {
							alert(error)
						})
					

					
				}
			}
		}
	}
</script>

<style scoped>
	.inOutgailv {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}



	.huozhiShow {
		width: 22%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.huozhiShowTit {
		line-height: .2rem;
		font-size: .12rem;
		display: flex;
		align-items: flex-end;
		color: #03dfe1;

	}

	.huozhiShowTit>span:nth-of-type(1) {
		font-size: .14rem;
	}

	.huozhiShowTit>span:nth-of-type(2) {
		font-size: .12rem;
	}

	.huozhiShowCon {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.houzhiImg{
		width: 95%;
		height: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background:url(../../../../static/img/houzhiImgbgxia.gif) no-repeat,url(../../../../static/img/houzhiImgbgxiasahng.png) no-repeat left top ;
		/* background:url(../../../../static/img/huozhiShang.png) no-repeat; */
		
		background-position-y: 20%;
		background-size: 100% 90%;
		
	}
	.tongbishangzhang{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color:#f52366 ;
		font-size: .14rem;
		font-weight: bold;
	}
	.totalHouzhi20TxtWrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.totalHouzhi20TxtWrap>div{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.totalHouzhi20TxtWrap>div>span:nth-of-type(1){
		color:#fff ;
		font-size: .16rem;
	}
	.totalHouzhi20TxtWrap>div>span:nth-of-type(2){
		color:#fff ;
		font-size: .12rem;
	}
	.totalHouzhi20TxtWrap>span{
		color:#fff ;
		font-size: .16rem;
		font-weight: bold;
	}
	

	.inOutgailvChart {
		width: 100%;
		height: 100%;
	}

	.zongliangShow {
		width: 20%;
		height: 90%;
		/* background-color: #42B983; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zongdanliang {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(../../../../static/img/huozhiShowbg.png) no-repeat center center;
		background-size: 100% 85%;
	}

	.zdlTit {
		font-size: .14rem;
		font-weight: bold;
		color: #c99a2c;
	}

	.zdlLine {
		height: 2px;
		width: 90%;
		background-color: #25d1c7;
		margin: .1rem 0;
		display: block;
	}

	.zdlTxt {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		color: #c99a2c;
		font-weight: bold;
	}

	.zdlTxt>span:nth-of-type(1) {
		font-size: .14rem;


	}

	.zdlTxt>span:nth-of-type(2) {
		font-size: .12rem;
	}

	.listShow {
		width: 45%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 3%;
		margin-right: 2%;
		justify-content: center;
	}

	.listShow .list {
		padding: 0.05rem 0;
		background: url(../../../../static/img/houzhilistbg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: .05rem 0;
	}
	

	.listTxt {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
	}

	.listTxt>span {
		font-size: .12rem;
		color: #c99a2c;
	}

	.listTxt>div {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		color: #c99a2c;
		font-weight: normal;
	}

	.listTxt1>span,
	.listTxt1>div {
		color: #1ccdd0;
	}

	.listTxt2>span,
	.listTxt2>div {
		color: #19d2a8;
	}

	.listTxt>div>span:nth-of-type(1) {
		font-size: .12rem;
	}

	.listTxt>div>span:nth-of-type(2) {
		font-size: .12rem;
	}

	.listTxtLine {
		border-left: 1px dashed #42a4ff;
		height: 95%;
	}
</style>
